<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>添加课表</title>
	<link rel="stylesheet" href="/css/layui.css">
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="/css/item.css">
	<style>
		.install {
			margin: 15px 0;
			font-size: 16px;
		}

		.timetable-name,
		.timetable-class {
			margin: 0 3%;
			width: 94%;
			height: 35px;
			padding: 10px 0;
		}

		.timetable-name input {
			width: 285px !important;
		}

		.timetable-name input,
		.timetable-class select {
			padding-left: 10px;
			height: 30px;
			width: 300px;
		}

		.timetable {
			margin: 30px 3%;
			width: 94%;
			border-radius: 5px;
			padding: 5px 0;
		}

		.week {
			width: calc(100% / 7.4);
			font-size: 16px;
			text-align: center;
			line-height: 40px;
			margin-bottom: 20px;
			border: 1px solid #C0C0C0;
			display: inline-block;
			vertical-align: top;
		}

		.timetable-info {
			width: 100%;
			font-size: 14px;
			text-align: center;
			line-height: 15px;
			padding: 5px 0;
			position: relative;
			display: inline-block;
			border-top: solid 1px #C0C0C0;
		}

		.timetable-info select {
			padding: 3px;
			width: 80%;
			margin: 1px 10%;
			background-color: transparent;
		}

		.timetable-info button {
			width: 7em;
			height: 30px;
			margin: 5px 0;
			text-align: center;
		}

		.delete {
			position: absolute;
			cursor: pointer;
			top: 1px;
			right: 1px;
			font-size: 14px;
			color: #9C9C9C;
		}

		.red {
			color: red;
		}
	</style>
</head>

<body>
	
	<div id="vue-root">
		<div class="install">
			<div class="timetable-name">
				<span>课表名称：</span>
				<input v-model="item.name" name="name" v-validate="'required'" data-vv-as="名称">
				<span class="red" v-text="err('name')"></span>
			</div>
			<div class="timetable-class">
				<span>所属班级：</span>
				<select v-model="item.classesId" name="classesId" data-vv-as="班级名称" v-validate="'required'">
					<option disabled="disabled" :value="null">请选择班级</option>
					<option v-for="classes in classess" :key="classes.id" :value="classes.id" v-text="classes.name">
					</option>
				</select>
				<span class="red" v-text="err('classesId')"></span>
			</div>
		</div>
		<div class="timetable">
			<div class="week" v-for="(day,index) in ['周一','周二','周三','周四','周五','周六','周日']">
				<div v-text="day" style="font-weight: bold;"></div>
				<div class="timetable-info" v-for="(lesson,index1) in item.lessons[index]">
					<span class="delete" @click="del(index,index1)">X</span>
					<select v-model="lesson.lessonPeriodId">
						<option disabled="disabled" :value="null">请选择时段</option>
						<option v-for="period in lessonPeriods" :key="period.id" :value="period.id"
							v-text="period.name"></option>
					</select>
					<select v-model="lesson.courseId">
						<option disabled="disabled" :value="null">请选择科目</option>
						<option v-for="course in courses" :key="course.id" :value="course.id" v-text="course.name">
						</option>
					</select>
				</div>

				<div class="timetable-info">
					<button @click="add(index)">添加</button>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<div class="offer" @click="submit">立即提交</div>
					<div class="return" onclick="history.back()">取消</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	
	
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/lib/laydate/laydate.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/item.js"></script>

	<script>
		var app = new Vue(merge({
			data: {
				classess: [],
				courses: [],
				lessonPeriods: [],
				item: {
					classesId: null,
					lessons: [[], [], [], [], [], [], []]
				},
				url: '/pc/timetable',
				schoolId: top_params().id
			},
			created: function () {
				var url = params().id ? '' : 'timetable/';
				axios.get('/pc/' + url + 'classes/all/' + this.schoolId).then(function (res) {
					this.classess = res.data;
				}.bind(this));
				axios.get('/pc/course/all/' + this.schoolId).then(function (res) {
					this.courses = res.data;
				}.bind(this));
				axios.get('/pc/timetable/period/all/' + this.schoolId).then(function (res) {
					this.lessonPeriods = res.data;
				}.bind(this));

				this.init();
			},
			methods: {
				add: function (index) {
					this.item.lessons[index].push({
						lessonPeriodId: null,
						courseId: null
					});
				},
				del: function (index, index1) {
					this.item.lessons[index].splice(index1, 1);
				},
				submit1: function () {

				}
			}

		}));

	</script>
</body>


</html>